<!--
 * @Date: 2024-10-22 10:07:51
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-10-23 16:49:46
 * @Description: 示例表单项目申报
-->
<template>
  <vxe-modal
    v-if="dialogState.visible"
    ref="dialogRef"
    :="dialogAttrs"
    v-model="dialogState.visible"
    @close="handleCancel"
  >
    <component
      :is="compsEnums[props.compType]"
      :="compsAttrs"
      @save="handleConfirm"
      @close="handleCancel"
      @confirm="handleConfirm"
    >
    </component>
    <template #footer>
      <el-button type="primary" @click="handleConfirm()">确定</el-button>
      <el-button @click="handleCancel()">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script setup>
import { computed, reactive } from 'vue';
import ProjSpecialPanel from './panels/ProjSpecialPanel.vue'
import ProjImprovePanel from './panels/ProjImprovePanel.vue'

const props = defineProps({
  // 类型
  type: { type: String, default: 'add' },
  // 弹窗名称
  title: { type: String, default: '项目申报' },
  // 是否可见
  visible: { type: Boolean, default: false },
  // 表单编码
  formCode: { type: String },
  // 弹窗类型
  compType: { type: String, default: 'special' },
  // 额外参数
  extParams: { type: Object, default: () => ({})},
  // 是否显示底部
  showFooter: { type: Boolean, default: false },
  // 取消方法
  onCancel: { type: Function },
  // 确认方法
  onConfirm: { type: Function },
  // 销毁方法
  onDestory: { type: Function },
})

// 弹窗的Ref
const dialogRef = ref(null)
// 弹窗属性配置
const dialogAttrs = reactive({
  title: props.title,
  width: 1000,
  height: 600,
  resize: true,
  zIndex: 1002,
  transfer: true,
  showZoom: true,
  minWidth: 460,
  minHeight: 320,
  fullscreen: true,
  className: 'rk-modal proj-apply-dialog',
  showFooter: props.showFooter,
  destroyOnClose: true,
})
// 弹窗数据集
const dialogState = reactive({
  visible: props.visible
})

// 组件的配置信息
const compsAttrs = computed(() => {
  const result = {
    type: props.compType,
    // 是否预算单位
    isBgtAg: '1',
    // 项目来源 1：基础库 2：储备库 3:需求库 4：历史项目 5、一体化同步项目 6、存量债务无项目生成项目
    proSource: '2',
    // 表单编码
    formCode: props.formCode,
    // 按钮类型
    buttonCode: props.type,
    // 额外参数
    ...props.extParams
  }
  return result
})
const compsEnums = {
  'special': ProjSpecialPanel,
  'improve': ProjImprovePanel,
}

const handleCancel = () => {
  if (props.onCancel) { props.onCancel() }
  handleDestory()
}
const handleConfirm = () => {
  if (props.onConfirm) { props.onConfirm() }
  handleDestory()
}
const handleDestory = () => {
  if (props.onDestory) { props.onDestory() }
}

</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
.proj-apply-dialog {
  .vxe-modal--box,
	.vxe-modal--header {
		border-radius: unset;
	}
	&.type--modal {
		.vxe-modal--body {
			// overflow: unset;
			.vxe-modal--content {
				// overflow: unset;
				padding: 0;
			}
		}
	}
}
</style>
